
.appBar {
	transition: background-color $transition-time-fast,
	backdrop-filter $transition-time-fast,
	box-shadow $transition-time-default !important;
	padding: 0.8em ($page-margin - 1.7em);
	z-index: 999 !important;
	.flex {
		transition: $transition-time-fast;
		border-radius: 1000px;
	}
	&.elevated{
		.flex {
			padding: 0.5em;
			background: rgb(0 0 0  / 0.4);
			backdrop-filter: blur(40px);
			box-shadow: 0 0 25px rgb(0 0 0 / 0.45);
		}
	}
	&-avatar {
		background: rgb(255 255 255 / 0.1) !important;
		&-icon {
			color: white;
		}
	}
	&-text {
		opacity: 0.7;
		transition: opacity $transition-time-fast;
		position: relative;
		color: white;
		text-decoration: none;
		&::after {
			content: "";
			width: 100%;
			height: 1.2px;
			background: white;
			opacity: 0.7;
			position: absolute;
			bottom: 4.6px;
			left: 0;
			transform: scaleX(0);
			transition: transform $transition-time-fast,
			background $transition-time-fast,
			opacity $transition-time-fast;
		}
		&:hover {
			opacity: 0.8;
			&::after {
				transform: scaleX(0.25);
				opacity: 0.8;
			}
		}
		&.active {
			opacity: 1;
			color: $clr-accent-default;
			&::after {
				transform: scaleX(0.5);
				opacity: 1;
				background: $clr-accent-default;
			}
		}
	}
}

.library-drawer{
	width: 20em;
	margin: 1.4em;
	height: calc(100vh - 2.8em) !important;
	border-radius: 20px;
	overflow-x: hidden;
	overflow-y: auto;
	.library-drawer-item{
		position: relative;
		overflow: hidden;
		border-radius: 1000px;
		> div::before{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: transparent;
			transition: $transition-time-default;
			z-index: -1;
			border-radius: 100px;
		}
	}
	.active.library-drawer-item {
		.material-symbols-rounded{
			--fill: 1;
		}
		&> div::before {
			background: $clr-accent-default;
		}
	}
	// Magic scrollbar
	&::-webkit-scrollbar {
		&-thumb {
			height: 150px;
			max-height: 33%;
		}
		&-track {
			margin-top: 15px;
			margin-bottom: 15px;
			background: transparent !important;
		}
	}
}

.appLoading {
	opacity: 0;
}
